<template>
    <div id='detlete'>
        <headernav></headernav>
        <div class="div">
            <div class="HomeHeader-logo"></div>
            <div class="HomeHeader-searchB">搜索</div>
            <div class="HomeHeader-chargeB">充值</div>
            <div class="HomeHeader-openAppB">打开App</div>
        </div>

        <div class="l-video">
            <div style="width: 100%; height: 100%; position: absolute;">
                <div class="room-video-play">
                    <div class="app-98c87e">
                        <div class="video-57f88b">
                            <img class="cover-0b4d79" :src="arr.roomSrc" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- <div class="c-tabs-header"> -->
        <!-- <div class="item cur" @click="chat(arr.rid)">聊天</div> -->
        <!-- <div class="item" @click="anchor">主播</div> -->
        <!-- <div class="item follow">关注</div> -->
        <!-- </div> -->

        <div class="anchor-info strong-anchor-info">
            <div class="main">
                <div class="img">
                    <img class="face" :src="arr.avatar" alt="">
                </div>
                <p class="nick">{{arr.nickname}}</p>
                <div class="other">
                    <span class="cate">{{arr.roomName}}</span>
                    <span class="audience">热度{{arr.hn}}</span>
                </div>
                <div class="des"></div>
            </div>
        </div>

        <!-- 相关直播 -->
        <div class="HomeLive-content">
            <div class="NormalRoomItem" v-for="(item,index) in obj" :key="index" @click="fun(index)">
                <div class="NormalRoomItem-show">
                    <div class="NormalRoomItem-showImg"><img :src="item.roomSrc" alt=""></div>
                    <div class="NormalRoomItem-showHot">{{item.hn}}</div>
                    <div class="NormalRoomItem-showAnchor">{{item.nickname}}</div>
                </div>
                <div class="NormalRoomItem-title">{{item.roomName}}</div>
            </div>
        </div>
        <!-- <router-view></router-view> -->

        <!-- <chat></chat> -->
    </div>
</template>
<script>
    import headernav from '@/components/nav'

    // import chat from './chat.vue'
    export default {
        name: 'detlete',
        // components: {
        //     chat
        // },
        components: {
            headernav,
        },
        data() {
            return {
                rid: [0],
                arr: [],
                obj: {},
                arr2:[]
            }
        },
        created() {
            this.rid = this.$route.query.rid
            this.Qin(this.rid)
        },
        methods: {
            Qin(rid) {
                this.$http.get(`/api/room/alikeList?rid=${rid}&count=4`).then(res => {
                    this.arr = res.data.data[0]
                    this.arr2 = res.data.data
                    this.obj = res.data.data
                })
            },
            fun(index){
                this.arr = this.arr2[index]
            }
      
        },


    }
</script>

<style scoped>
    .follow {
        color: #fff;
        width: 81px;
        background-color: #ff7d23;

        flex: none;
        text-indent: 10px;
    }

    .item {
        position: relative;
        flex: 1;
        line-height: 40px;
        text-align: center;
        font-size: 14px;
        color: #333;
    }

    .cur {
        color: #f50;
    }

    .c-tabs-header {
        width: 100%;
        position: absolute;
        top: 240px;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid #eee;
    }

    #headernav {
        position: fixed;
        top: 0;

        z-index: 99;
    }

    #headernav .div {

        display: flex;
        align-items: center;
        width: 100%;
        height: 54px;
        background-color: #fff;
        overflow: hidden;
    }

    #headernav .div .HomeHeader-logo {
        margin: 6px 10px;
        width: 76px;
        height: 34px;
        background: url(https://shark2.douyucdn.cn/front-publish/m-douyu-v3-master/assets/images/logo_864f3ef.png) no-repeat;
        background-size: 100% 100%;
    }

    #headernav .div .HomeHeader-searchB {
        width: 120px;
        height: 28px;
        border-radius: 14px;
        background: #f2f2f2;
        margin-left: 10px;
        background-image: url(https://shark2.douyucdn.cn/front-publish/m-douyu-v3-master/assets/images/search_0f4cda6.png);
        background-size: 16px 16px;
        background-position: 10px 6px;
        background-repeat: no-repeat;
        padding-left: 32.5px;
        font-size: 14px;
        color: #bbb;
        line-height: 28px;
        display: flex;
    }

    #headernav .div .HomeHeader-chargeB {
        color: #666;
        margin-left: 10px;
        width: 49px;
        height: 28px;
        text-align: center;
        line-height: 28px;
        font-size: 12px;
    }

    #headernav .div .HomeHeader-openAppB {
        background: #ff5d23;
        border-radius: 14px;
        color: #fff;
        letter-spacing: .92px;
        margin-right: 10px;
        margin-left: 10px;
        width: 74px;
        height: 28px;
        text-align: center;
        line-height: 28px;
        font-size: 12px;
    }

    .HomeHeader .HomeHeader-openApp,
    .HomeHeader .HomeHeader-openAppB {
        margin-left: 10px;
        width: 74px;
        height: 28px;
        text-align: center;
        line-height: 28px;
        font-size: 12px;



    }

    #headernav .div .left-fext {
        font-size: 0.427rem;
        color: #fff;
    }

    #headernav .div .left-fext {
        font-size: 0.427rem;
        color: #fff;
    }

    .l-video {
        position: absolute;
        width: 100%;
        height: 206px;
        background-color: #000;
        overflow: hidden;
        z-index: 2;
    }

    .room-video-play {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .app-98c87e {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: #000;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .video-57f88b {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .cover-0b4d79 {

        width: 100%;
        height: 100%;
        background-color: #000;
    }



    .main {
        margin-top: 260px;
        position: relative;
        padding: 10px;
    }

    .nick {
        font-size: 18px;
        color: #333;
        line-height: 22px;
        margin-top: 10px;
        padding-left: 64px;
    }

    .other {
        min-height: 16px;
        padding-left: 65px;
        margin-top: 10px;
        font-size: 10px;
    }

    .cate {
        color: #f70;
        margin-right: 6px;
    }

    .audience {
        color: #999;
    }

    .des {
        padding: 0 10px 15px;
        line-height: 1.2;
        font-size: 12px;
        color: #999;
        white-space: normal;
        word-break: break-all;
    }

    .face {
        width: 44px;
        height: 44px;
        position: relative;
        left: 10px;
        top: 10px;
    }

    .anchor-info {
        position: relative;
    }

    .img {
        position: absolute;
        left: 10px;
        top: 10px;
    }

    /* 相关直播 */
    .HomeLive-content {
        box-sizing: border-box;
        padding-left: 4px;
        width: 100%;
        overflow: hidden;
    }

    .NormalRoomItem {
        color: #333;
        float: left;
        box-sizing: border-box;
        padding: 0 5px 5px 0;
        width: 50%;
    }

    .NormalRoomItem-show {
        color: #fff;
        position: relative;
        border-radius: 4px;
        width: 100%;
        overflow: hidden;
        background: url(https://shark2.douyucdn.cn/front-publish/m-douyu-v3-master/assets/images/list-item-def-thumb_b10bbe8.png) no-repeat;
        background-size: 100% 100%;
    }

    .NormalRoomItem-showImg {
        -moz-border-radius: 4px;
        border-radius: 4px;
        width: 100%;
        height: 100%;
    }


    .NormalRoomItem-showHot {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        box-sizing: border-box;
        padding-right: 5px;
        width: 100%;
        height: 18px;
        background: url(https://shark2.douyucdn.cn/front-publish/m-douyu-v3-master/assets/images/bg-shadow_e60f214.png) no-repeat;
        background-size: 100% 100%;
        border-radius: 4px 4px 0 0;
    }

    .NormalRoomItem-showAnchor {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 10;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        padding: 0 5px;
        border-radius: 0 0 4px 4px;
        width: 100%;
        height: 18px;
        overflow: hidden;
        background: linear-gradient(transparent, rgba(0, 0, 0, .8));
    }

    .NormalRoomItem-showImg img {
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        width: 100%;
        height: 100%;
    }

    .NormalRoomItem-title {
        width: 100%;
        height: 27px;
        line-height: 27px;
        font-size: 12px;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>